<template>
    <Form ref="formValidate" v-model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="用户" prop="username" >
            <Input v-model="formValidate.username" placeholder="输入用户名" ></Input>
        </FormItem>
        <FormItem label="年龄" prop="age" >
        <Input v-model="formValidate.age" placeholder="输入年龄"></Input>
        </FormItem>
        <FormItem label="管理员权限" prop="power">
        <Input v-model="formValidate.power" placeholder="输入管理员姓名"></Input>
        </FormItem>
        <FormItem label="密码" prop="password">
        <Input  v-model="formValidate.password" placeholder="输入密码"></Input>
        </FormItem>
        <FormItem label="邮箱" prop="email">
            <Input v-model="formValidate.email" placeholder="输入邮箱"></Input>
        </FormItem>
 
        <FormItem label="地址" prop="address">
            <Input v-model="formValidate.address" placeholder="输入地址"></Input> 
        </FormItem>
        <FormItem label="注册时间">
            <Row>
                <Col span="11">
                    <FormItem prop="reg_data">
                        <DatePicker type="date" placeholder="Select date" v-model="formValidate.reg_data"></DatePicker>
                    </FormItem>
                </Col>
            </Row>
        </FormItem>
        <FormItem label="性别" prop="sex">
            <i-switch v-model="formValidate.sex" size="large">
                <span slot="open">男</span>
                <span slot="close">女</span>
            </i-switch>
        </FormItem>
        <FormItem label="爱好" prop="hobbies">
            <CheckboxGroup v-model="formValidate.hobbies">
                <Checkbox label="看电影"></Checkbox>
                <Checkbox label="睡觉"></Checkbox>
                <Checkbox label="运动"></Checkbox>
                <Checkbox label="吃东西"></Checkbox>
                 <Checkbox label="学习"></Checkbox>
            </CheckboxGroup>
        </FormItem>
        <FormItem label="找回账号" prop="problem">
            <Input v-model="formValidate.problem" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="输入验证问题"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
</template>

<script>
export default {
    props:["formdata"],
    data () {
            return {
                formValidate: {
                    username: '',
                    password:'',
                    power:'',
                    email: '',
                    address: '',
                    sex: true,
                    hobbies: [],
                    reg_data: '',
                    problem: '',
                    age:''
                },
                ruleValidate: {
                    username: [
                        { required: true, message: '用户名不得为空', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '密码不得为空', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '邮箱不得为空', trigger: 'blur' },
                        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '地址不得为空', trigger: 'change' }
                    ],
                    hobbies: [
                        { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
                        { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
                    ],
                    problem: [
                        { required: true, message: 'Please enter a personal problem', trigger: 'blur' },
                        { type: 'string', min: 20, message: 'problem no less than 20 words', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        },
        updated(){
            // console.log(moment(this.$store.state.user.listId.pro_data).format(yyyy-mm-dd));
            this.formValidate=this.formdata;
            console.log(this.$store.state.user.listId);
        },
        watch:{
            formValidate(){
                console.log(this.formValidate);
            }
        }
}
</script>

<style>

</style>
